<script setup lang="ts">
  import rawEditorConfig from '@/config/data.json';
  import type { DataConfig, EditorMaterial } from '@/types/lowcode';
  import { ref } from 'vue';

  // 使用类型断言确保数据类型正确
  const editorConfig = rawEditorConfig as DataConfig;
  const components = ref<EditorMaterial[]>(editorConfig.editorMaterial);
  /**
   * @description 拖拽开始事件
   * @param component 拖拽的组件
   */
  const handleDragStart = (event: DragEvent, component: EditorMaterial) => {
    try {
      // 设置拖拽数据
      event.dataTransfer!.effectAllowed = component.effect || 'copy';
      event.dataTransfer!.setData('application/json', JSON.stringify(component));
    } catch (error) {
      console.error('拖拽开始事件失败', error);
    }
  };
</script>

<template>
  <div class="component-preview">
    <h3>组件预览</h3>
    <div class="component-list">
      <div
        v-for="component in components"
        :key="component.id"
        class="component-item"
        draggable="true"
        @dragstart="(e) => handleDragStart(e, component)"
      >
        <div class="component-icon">{{ component.icon }}</div>
        <div class="component-name">{{ component.name }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .component-preview {
    width: 240px;
    height: 100%;
    border-right: 1px solid #e5e7eb;
    padding: 16px;
    background-color: #f9fafb;
    .component-list {
      margin-top: 16px;
      .component-item {
        display: flex;
        align-items: center;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 6px;
        background-color: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        cursor: move;
        transition: all 0.3s;
        &:hover {
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .component-icon {
          margin-right: 8px;
          font-size: 18px;
        }
      }
    }
  }
</style>
